<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器    语法：任意选择器：hover【悬停】 每个伪类选择器 具备特点
			               所有元素具备：hover【常见伪类选择器】
			*/
		   h1:hover{
			   background: #ff5500;
			   color: #38eedf;
		   }
		   /**
			* 伪类选择器    link      链接未点时状态
			*              active    链接被点时状态
			*              visited   链接点击后状态
			*              hover     悬停链接时状态
			* 主要结合在一起，针对a元素
			*/
		   a:link{/*未访问状态*/
			   color: #aaffff;
			   /*去掉超链接下划线*/
			   text-decoration: none;
		   }
		   a:active{/*被点击时状态*/
			   color: #ffff7f;
			   background: #aaaaff;
		   }
		   a:visited{/*点击后状态*/
			   color: #38eedf;
			   background: #ff5500;
		   }
		   a:hover{
			   font-size: 36px;
		   }
		   /**
			* 伪类选择器 input：focus 获取焦点 鼠标点击输入框时效果
			* 
			针对 输入框 input元素
           */
		  input:focus{
			  background: #ffff00;
		  }
		  /*伪类选择器     :first-child 匹配第一个儿子元素
		                  :last-chiild 匹配最后一个儿子元素
						  :nth-child   匹配n个儿子元素
						  针对父子级，默认父子级 table.列表..
		  */
		 li:first-child{
			 background: #ffff00;
			 color: #ff5500;
		 }
		 li:last-child{
			 font-size: 15pt;
		 }
		 li:last-child(1){
			 background: #38eedf;
		 	 font-size: 15pt;
		 }
		 li:last-child(2){
			 background: #aaaaff;
		 	 font-size: 15pt;
		 }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="a">超链接</a>
		<input type="text">
		<!--元素直接存在父子级关系。默认存在父子级关系-->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>衡水</li>
		</ol>
	</body>
</html>